<template>
    <div class="con">
        <div class="header">
            <img src="../../assets/images/backtoutu1.png" alt>

            <img :src="logoUrl" alt class="logoUrl">
            <p class="bankName">{{bankName}}</p>
            <span class="tip2">手续费0.8%+每笔2元</span>
            <div class="cardnum">
                <span>{{accountNo.substr(0,4)}}</span>
                <span>****</span>
                <span>****</span>
                <span>{{accountNo.substr(accountNo.length-4)}}</span>
            </div>
        </div>

        <div class="info">
            <div class="content">
                <p>还款日</p>
                <span>
                    <select v-model="endDate">
                        <option
                            v-for="(item,index) in daylist"
                            :value="item.value"
                            :key="index"
                        >{{item.label}}</option>
                    </select>
                </span>
                <img src="../../assets/images/more.png" alt class="more">
            </div>
            <div class="content">
                <p>还款金额</p>
                <input
                    type="number"
                    placeholder="每笔最高可还20000元"
                    v-model="amount"
                    @blur="selectRemain()"
                >
            </div>
            <div class="content">
                <div @click="wenhao()" class="help">
                    <p>剩余额度</p>

                    <img src="../../assets/images/wenhao.png" alt class="wenhao">
                </div>

                <input type="number" placeholder="请输入卡内剩余额度 (元)" v-model="remainAmount">
            </div>
            <p class="tip1">
                剩余额度需大于
                <span>{{data.reserveAmount}}</span>元
            </p>
        </div>

        <div class="btn" @click="ok()">
            <button>下一步</button>
        </div>
        <div class="tip" @click="help()">
            <p>帮助</p>
        </div>

        <van-dialog v-model="show" confirmButtonText="知道了">
            <p style="padding:20px;font-weight:200">
                剩余额度为信用卡内剩余可用的金额，还卡计划将通过剩余额度进行操作完成还款，因此还款中请谨慎使用该卡消费，
                <b>务必确保卡内剩余额度大于页面提示的金额</b>，否则还卡计划将会失败。
            </p>
        </van-dialog>
           <van-dialog v-model="show1" confirmButtonText="好的">
            <p style="padding:20px;font-weight:200;text-align:center">
                您卡内的剩余额度不足<br>
               <span style="font-size:12px;color:#A6A9B5"> 
                   剩余额度需大于页面提示金额，否则无法完成还款计划，可适当降低还款总金额以继续</span>
            </p>
        </van-dialog>
            <van-dialog v-model="show2" confirmButtonText="继续"
            @confirm="go()"
             show-cancel-button cancelButtonText="不执行">
            <p style="padding:20px;font-weight:200;text-align:center">
                该还卡计划可能会逾期，是否继续<br>
               <span style="font-size:12px;color:#A6A9B5"> 
                   可降低还款总金额来避免逾期还款</span>
            </p>
        </van-dialog>
    </div>
</template>


<script>
export default {
    name: "choosebackcreditnext",
    data() {
        return {
            timestamp: "",
            logoUrl: "",
            bankName: "",
            accountNo: "",
            show: false,
            show1:false,
            show2:false,
            daylist: [],
            amount: "",
            remainAmount: "",
            endDate: "",
            data: {}
        };
    },
    methods: {
        go(){
            this.$router.push({ name: "backplandetail" });

        },
        ok() {
            if(this.amount==""){
                this.$toast("请输入还款金额");
            }else if(this.remainAmount==""){
                this.$toast("请输入卡内剩余额度");

            }else if(this.remainAmount<this.data.reserveAmount){
                this.show1=true;
            }else{
                 this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/repay/createRepayOrder?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    amount: this.amount,
                    cardId: localStorage.getItem("xycardId"),
                    endDate: this.endDate,
                    channelId:this.data.channelId
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.data=response.data.data;
                        localStorage.setItem("backPlanDetail",JSON.stringify(this.data));

                        if(response.data.data.beOverdued==1){
                            this.show2=true;
                        }else{
                            this.go();
                        }
                        // this.data = response.data.data;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });

            }
        },
        wenhao() {
            this.show = true;
        },
        help() {
            this.$router.push({ name: "help" });
        },
        // 查询剩余金额
        selectRemain() {
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/repay/getRepayAmount?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    amount: this.amount,
                    cardId: localStorage.getItem("xycardId"),
                    endDate: this.endDate
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.data = response.data.data;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.logoUrl = localStorage.getItem("xylogoUrl");
        this.bankName = localStorage.getItem("xybankName");
        this.accountNo = localStorage.getItem("xyaccountNo");

        // 循环列表框
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        month = month < 10 ? "0" + month : month;
        this.endDate = `${year}-${month}-01`;
        for (var i = 1; i <= 28; i++) {
            i = i < 10 ? "0" + i : i;
            this.daylist.push({
                value: `${year}-${month}-${i}`,
                label: "每月" + i + "日"
            });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #fff;
}

.info {
    width: 100%;
    margin-top: 12px;
    background: #fff;
}
.info .content {
    width: 90%;
    margin-left: 5%;
    border-bottom: 1px solid #e9eaee;
    position: relative;
    height: 62px;
}
.info .content select {
    background: transparent;
}
.info .content .icon {
    width: 20px;
    height: 20px;
    margin-top: 21px;
}
.info .content p {
    position: absolute;
    top: 21px;
    color: #a6a9b5;
}
.info .content input {
    position: absolute;
    top: 15px;
    right: 0px;
    font-size: 20px;
    text-align: right;
}
.info .content .help {
    height: 62px;
    width: 80px;
}
input::-webkit-input-placeholder {
    color: #cdd0da;
    font-size: 18px;
    font-weight: 200;
}
.info .content .wenhao {
    position: absolute;
    top: 23px;
    left: 64px;
    width: 14px;
}

.info .content span {
    position: absolute;
    right: 20px;
    top: 21px;
}
.info .content .more {
    position: absolute;
    right: 2px;
    top: 26px;
    width: 6px;
}
.info .content:last-child {
    border-bottom: none;
    height: 104px;
}
.info .tip1 {
    width: 90%;
    margin-left: 5%;
    line-height: 30px;
    text-align: right;
    font-size: 12px;
    color: #2d3659;
    font-weight: 200;
}
.info .tip1 span {
    color: #ffae4e;
}

.tip {
    color: #ffae4e;
    font-size: 16px;
    margin-top: 42px;
    text-align: center;
}
.btn {
    width: 90%;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
    margin-left: 5%;
    margin-top: 64px;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}

/* 头部卡片样式 */
.header {
    width: 100%;
    background: #fff;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.header img {
    width: 90%;
    margin-left: 5%;
    margin-top: 10px;
}

.header .logoUrl {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 20px;
    top: 20px;
}
.header .bankName {
    position: absolute;
    top: 35px;
    left: 85px;
    font-weight: 200;
}
.header .tip2 {
    position: absolute;
    top: 37px;
    right: 25px;
    font-weight: 200;
    font-size: 10px;
}

.header .cardnum {
    font-size: 22px;
    position: absolute;
    top: 76px;
    left: 67px;
}
</style>
